<template>
  <div class="container" ref="container"></div>
  <div class="buttons">
    <button @click="moveCamera">移动相机</button>
    <button @click="moveCube">移动物体</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import dat from "dat.gui";

// 创建一个控制对象
const controlData = {
  rotationSpeed: 0.01,
  color: "#66ccff",
  wireframe: false,
};
// 创建实例
const gui = new dat.GUI();
const f = gui.addFolder("配置");

// 进度条
// f.add(controlData, "rotationSpeed", 0.01, 0.1, 0.01);
f.add(controlData, "rotationSpeed").min(0.01).max(0.1).step(0.01);

// 颜色选择器
f.addColor(controlData, "color");

// 选择框
f.add(controlData, "wireframe");

f.domElement.id = "gui";

f.open();

const container = ref();

// Our Javascript will go here.
// 创建场景
const scene = new THREE.Scene();
// 改变场景的背景-颜色
// scene.background = new THREE.Color(0x666666);

// 场景雾效果
// scene.fog = new THREE.Fog(0xcccccc, 10, 15);

// 创建立体纹理 左右 上下 前后
const cubeTextur = new THREE.CubeTextureLoader()
  .setPath("/imags/")
  .load(["04.jpg", "01.jpg", "05.jpg", "02.jpg", "06.jpg", "03.jpg"]);

// 添加场景的背景-图片
scene.background = cubeTextur;

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 调整相机位置
camera.position.z = 10;
camera.position.y = 10;

const moveCamera = () => {
  camera.position.z = 10;
  camera.position.y = 15;
  // camera.lookAt(0, 3, 0);
};

// // 创建立方体
// const geometry = new THREE.BoxGeometry();

// 创建纹理
// const texture = new THREE.TextureLoader().load("imags/02-map.jpg");

// // 添加材质
// const material = new THREE.MeshBasicMaterial({
//   // color: 0x0448c3,
//   map: texture,
// });

// 创建一个球体
const sphere = new THREE.SphereGeometry(1);
const material = new THREE.MeshBasicMaterial({
  envMap: cubeTextur,
});

// 创建网格
const cube = new THREE.Mesh(sphere, material);
cube.position.set(0, 3, 0);
scene.add(cube);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 调整渲染器窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);

// 添加一个网格地面
const gridHepler = new THREE.GridHelper(10, 10);
scene.add(gridHepler);

// 在页面中添加元素
onMounted(() => {
  // 将gui节点添加到页面
  container.value.appendChild(f.domElement);
  // 将渲染节点添加到页面
  container.value.appendChild(renderer.domElement);
});

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 当轨道控制器改变时候进行监听
// controls.addEventListener("change", function (e) {
//   console.log(e);
// });

// 开启阻尼效果 （视角拖动的时候会有惯性）
controls.enableDamping = true; // 开启
controls.dampingFactor = 0.05; // 阻尼惯性大小

// 开启相机自动旋转
// controls.autoRotate = true;
// controls.autoRotateSpeed = 3;

// 添加坐标轴
const axesHelper = new THREE.AxesHelper(5);
axesHelper.position.y = 3;
scene.add(axesHelper);

// 进行渲染
// renderer.render(scene, camera);

const moveCube = () => {
  cube.position.set(3, 5, 0);
  const v = new THREE.Vector3(
    cube.position.x,
    cube.position.y,
    cube.position.z
  );
  controls.target = v;
  camera.lookAt(v);
};

// 让立方体动起来
function animate() {
  requestAnimationFrame(animate);
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;

  cube.rotation.x += controlData.rotationSpeed;
  cube.rotation.y += controlData.rotationSpeed;

  // cube.material.color = new THREE.Color(controlData.color);

  material.wireframe = controlData.wireframe;

  // 轨道控制器更新
  controls.update();
  // 调用渲染器进行渲染
  renderer.render(scene, camera);
}

animate();
</script>

<style>
* {
  margin: 0;
}
html,
body {
  width: 100vw;
  height: 100vh;
}

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.buttons {
  left: 20px;
  position: fixed;
  top: 20px;
}

#gui {
  position: absolute;
  right: 0;
  width: 300px;
}
</style>
